<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" ></div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  import resize from './mixin/resize'
  
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      id: {
        type: String,
        default: 'chart123'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      chartData: {
        type: Array,
        default: ''
      },
      chartRiqi: {
        type: Array,
        default: ''
      }
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.initChart()
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    watch:{
      chartData: {
        handler(newValue, oldValue) {
          // this.chartRiqi = newValue;  //把新值赋值给我们的属性数据
          this.chartData = newValue
          this.initChart();  //刷新echarts图表
        },
        deep: true
      },
      chartRiqi: {
        handler(newValue, oldValue) {
          // this.chartRiqi = newValue;  //把新值赋值给我们的属性数据
          this.chartRiqi = newValue
          this.initChart();  //刷新echarts图表
        },
        deep: true
      }
    },
    methods: {
      initChart() {
        this.chart = echarts.init(document.getElementById(this.id))
        // const xData = (function() {
        //   const data = []
        //   for (let i = 1; i < 13; i++) {
        //     data.push(i + 'month')
        //   }
        //   return data
        // }())
        this.chart.setOption({
    xAxis: {
      type: 'category',
      data: this.chartRiqi,
      name: "单位（年月日）",
      boundaryGap: false,
    },
  
    yAxis: {
      type: 'value',
      name: "单位（mm）",
      // interval:10, // 步长
    },
    dataZoom: [{
        show: true,
        height: 30,
        xAxisIndex: [
          0
        ],
        bottom: 30,
        start: 10,
        end: 80,
        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        handleSize: '110%',
        handleStyle: {
          color: '#d3dee5'

        },
        textStyle: {
          color: '#fff' },
        borderColor: '#90979c'

      }, {
        type: 'inside',
        show: true,
        height: 15,
        start: 1,
        end: 35
      }],
    toolbox: {
            feature: {
              saveAsImage: {},
              magicType: { show: true, type: ['line', 'bar'] },
              dataView: { show: true, readOnly: false }// 数据视图打开并允许编辑
            }
          },
    tooltip : {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
    series: [
      {
        data: this.chartData,
        // data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]})
      }
    }
  }
  </script>
  